<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部商品 - 面包工坊</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/products.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div id="app">
        <!-- 复用header部分 -->
        <header class="header">
            <!-- ... header内容与index.html相同 ... -->
        </header>

        <main class="products-page">
            <div class="container">
                <!-- 面包屑导航 -->
                <div class="breadcrumb">
                    <a href="../index.html">首页</a>
                    <i class="fas fa-angle-right"></i>
                    <span>全部商品</span>
                </div>

                <!-- 在面包屑导航下方添加促销banner -->
                <div class="promo-banner">
                    <div class="banner-item">
                        <img src="../assets/img/banner/promo1.jpg" alt="限时特惠">
                        <div class="banner-content">
                            <h3>新人专享</h3>
                            <p>首单立减20元</p>
                            <button class="btn-primary">立即领取</button>
                        </div>
                    </div>
                </div>

                <!-- 在分类栏上方添加快捷筛选标签 -->
                <div class="quick-filter">
                    <div class="filter-tags">
                        <button class="tag-btn active">全部</button>
                        <button class="tag-btn">特惠<span class="count">12</span></button>
                        <button class="tag-btn">新品<span class="count">25</span></button>
                        <button class="tag-btn">热卖<span class="count">18</span></button>
                        <button class="tag-btn">品牌优选</button>
                    </div>
                    <div class="selected-filters">
                        <span class="filter-label">已选：</span>
                        <div class="filter-tag">
                            价格：¥10-50
                            <i class="fas fa-times"></i>
                        </div>
                        <div class="filter-tag">
                            新品
                            <i class="fas fa-times"></i>
                        </div>
                    </div>
                </div>

                <div class="products-container">
                    <!-- 左侧分类栏 -->
                    <aside class="category-sidebar">
                        <div class="category-title">
                            <i class="fas fa-list"></i>
                            商品分类
                        </div>
                        <ul class="category-list">
                            <li class="active">
                                <a href="#all">全部商品</a>
                                <span class="count">(120)</span>
                            </li>
                            <li>
                                <a href="#european">欧式面包</a>
                                <span class="count">(45)</span>
                            </li>
                            <li>
                                <a href="#japanese">日式面包</a>
                                <span class="count">(32)</span>
                            </li>
                            <li>
                                <a href="#sweet">甜点面包</a>
                                <span class="count">(28)</span>
                            </li>
                            <li>
                                <a href="#healthy">健康面包</a>
                                <span class="count">(15)</span>
                            </li>
                        </ul>

                        <!-- 价格筛选 -->
                        <div class="filter-section">
                            <h3>价格区间</h3>
                            <div class="price-range">
                                <input type="number" v-model="priceRange.min" placeholder="最低价">
                                <span>-</span>
                                <input type="number" v-model="priceRange.max" placeholder="最高价">
                                <button @click="filterByPrice">确定</button>
                            </div>
                        </div>

                        <!-- 其他筛选条件 -->
                        <div class="filter-section">
                            <h3>商品属性</h3>
                            <div class="filter-options">
                                <label>
                                    <input type="checkbox" v-model="filters.new">
                                    新品
                                </label>
                                <label>
                                    <input type="checkbox" v-model="filters.promotion">
                                    促销
                                </label>
                                <label>
                                    <input type="checkbox" v-model="filters.inStock">
                                    有货
                                </label>
                            </div>
                        </div>
                    </aside>

                    <!-- 右侧商品展示区 -->
                    <div class="products-content">
                        <!-- 排序工具栏 -->
                        <div class="toolbar">
                            <div class="sort-options">
                                <button :class="{ active: sortBy === 'default' }" 
                                        @click="sortProducts('default')">综合</button>
                                <button :class="{ active: sortBy === 'sales' }"
                                        @click="sortProducts('sales')">销量</button>
                                <button :class="{ active: sortBy === 'price' }"
                                        @click="sortProducts('price')">
                                    价格
                                    <i class="fas" :class="priceOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down'"></i>
                                </button>
                            </div>
                            <div class="view-options">
                                <button :class="{ active: viewMode === 'grid' }"
                                        @click="viewMode = 'grid'">
                                    <i class="fas fa-th-large"></i>
                                </button>
                                <button :class="{ active: viewMode === 'list' }"
                                        @click="viewMode = 'list'">
                                    <i class="fas fa-list"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 商品网格 -->
                        <div :class="['products-grid', viewMode]">
                            <div v-for="product in filteredProducts" 
                                 :key="product.id" 
                                 class="product-card">
                                <div class="card-header">
                                    <span class="shop-tag">官方店铺</span>
                                    <button class="btn-follow">
                                        <i class="far fa-heart"></i>
                                        关注
                                    </button>
                                </div>
                                <div class="product-img">
                                    <img :src="product.image" :alt="product.name">
                                    <div class="hover-info">
                                        <div class="product-tags">
                                            <span class="tag">包邮</span>
                                            <span class="tag">7天无理由退换</span>
                                        </div>
                                        <div class="quick-actions">
                                            <button class="btn-preview">快速预览</button>
                                            <button class="btn-buy">立即购买</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-info">
                                    <div class="title-row">
                                        <span class="product-tag">新品</span>
                                        <h3>{{product.name}}</h3>
                                    </div>
                                    <div class="desc">{{product.description}}</div>
                                    <div class="price-row">
                                        <div class="price-info">
                                            <span class="current-price">¥{{product.price}}</span>
                                            <span class="original-price">¥{{product.originalPrice}}</span>
                                            <span class="discount">{{product.discount}}折</span>
                                        </div>
                                        <div class="sales-info">
                                            <span class="sales">月销{{product.sales}}+</span>
                                            <span class="rating">
                                                <i class="fas fa-star"></i>
                                                {{product.rating}}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="shop-info">
                                        <img :src="product.shopLogo" alt="店铺logo">
                                        <div class="shop-detail">
                                            <span class="shop-name">{{product.shopName}}</span>
                                            <div class="shop-rating">
                                                <span>商品 {{product.shopRating.goods}}</span>
                                                <span>服务 {{product.shopRating.service}}</span>
                                                <span>物流 {{product.shopRating.logistics}}</span>
                                            </div>
                                        </div>
                                        <button class="btn-enter-shop">进店逛逛</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页器 -->
                        <div class="pagination">
                            <button :disabled="currentPage === 1" 
                                    @click="currentPage--">上一页</button>
                            <button v-for="page in totalPages" 
                                    :key="page"
                                    :class="{ active: currentPage === page }"
                                    @click="currentPage = page">
                                {{page}}
                            </button>
                            <button :disabled="currentPage === totalPages" 
                                    @click="currentPage++">下一页</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 复用footer部分 -->
        <footer class="footer">
            <!-- ... footer内容与index.html相同 ... -->
        </footer>
    </div>

    <script src="../assets/js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                products: [], // 商品数据
                viewMode: 'grid',
                sortBy: 'default',
                priceOrder: 'asc',
                currentPage: 1,
                pageSize: 20,
                priceRange: {
                    min: '',
                    max: ''
                },
                filters: {
                    new: false,
                    promotion: false,
                    inStock: false
                }
            },
            computed: {
                filteredProducts() {
                    let result = [...this.products];
                    
                    // 价格筛选
                    if (this.priceRange.min !== '') {
                        result = result.filter(p => p.price >= this.priceRange.min);
                    }
                    if (this.priceRange.max !== '') {
                        result = result.filter(p => p.price <= this.priceRange.max);
                    }

                    // 属性筛选
                    if (this.filters.new) {
                        result = result.filter(p => p.isNew);
                    }
                    if (this.filters.promotion) {
                        result = result.filter(p => p.isPromotion);
                    }
                    if (this.filters.inStock) {
                        result = result.filter(p => p.stock > 0);
                    }

                    // 排序
                    switch(this.sortBy) {
                        case 'sales':
                            result.sort((a, b) => b.sales - a.sales);
                            break;
                        case 'price':
                            result.sort((a, b) => {
                                return this.priceOrder === 'asc' ? 
                                    a.price - b.price : 
                                    b.price - a.price;
                            });
                            break;
                    }

                    return result;
                },
                totalPages() {
                    return Math.ceil(this.filteredProducts.length / this.pageSize);
                }
            },
            methods: {
                sortProducts(type) {
                    if (type === 'price' && this.sortBy === 'price') {
                        this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
                    }
                    this.sortBy = type;
                },
                filterByPrice() {
                    // 价格筛选逻辑
                },
                addToCart(product) {
                    // 添加到购物车
                },
                toggleFavorite(product) {
                    // 收藏/取消收藏
                }
            },
            mounted() {
                // 模拟获取商品数据
                // 实际项目中应该通过API获取
                this.products = [
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    }
                    // ... 更多商品数据
                ];
            }
        });
    </script>
</body>
</html> 